<nz-modal [(nzVisible)]="visible" [nzTitle]="detailItem.id ? '修改用户' : '新增用户'" [nzMaskClosable]="false"
  (nzOnCancel)="onCancel()" [nzFooter]="nzModalFooter" nzWidth="500">
  <form nz-form #eitorForm="ngForm">
    <nz-form-item class="mb-md">
      <nz-form-control nzErrorTip="请输入姓名！"
        [nzValidateStatus]="name.invalid && (name.dirty || name.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-user">
          <input #name="ngModel" autocomplete="off" nz-input [(ngModel)]="detailItem.name" name="name" placeholder="姓名"
            required />
        </nz-input-group>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-md">
      <nz-form-control nzErrorTip="请选择学校！"
        [nzValidateStatus]="school.invalid && (school.dirty || school.touched) ? 'error' : ''" nzHasFeedback>
        <app-school-select #schoolSelect #school="ngModel" name="school" required [(ngModel)]="schooldto">
        </app-school-select>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="erroremail"
        [nzValidateStatus]="mail.invalid && (mail.dirty || mail.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-mail">
          <input #mail="ngModel" autocomplete="off" nz-input nzFor="email" [(ngModel)]="detailItem.mail" name="mail"
            placeholder="邮箱" [userId]="detailItem.id" app-async-email-validator required email />
        </nz-input-group>
        <ng-template #erroremail let-control>
          <ng-container *ngIf="mail.hasError('required')">
            请输入邮箱!
          </ng-container>
          <ng-container *ngIf="mail.hasError('email')">
            请输入正确邮箱!
          </ng-container>
          <ng-container *ngIf="mail.hasError('nameExists')">
            邮箱已被占用!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item class="mb-md">
      <nz-form-control [nzErrorTip]="erroraccout"
        [nzValidateStatus]="account.invalid && (account.dirty || account.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-user">
          <input #account="ngModel" autocomplete="off" nz-input [(ngModel)]="detailItem.account" name="account"
            [userId]="detailItem.id" app-async-account-validator placeholder="登录名" required />
        </nz-input-group>
        <ng-template #erroraccout let-control>
          <ng-container *ngIf="account.hasError('required')">
            请输入登录名!
          </ng-container>
          <ng-container *ngIf="account.hasError('nameExists')">
            登录名已被占用!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control [nzErrorTip]="errorTpl"
        [nzValidateStatus]="password.invalid && (password.dirty || password.touched) ? 'error' : ''" nzHasFeedback>
        <nz-input-group nzPrefixIcon="anticon anticon-lock">
          <input #password="ngModel" autocomplete="off" nz-input style="height: 38px;" type="password"
            [(ngModel)]="detailItem.password" name="password" placeholder="密码" required />
        </nz-input-group>
        <app-password-strength [password]="detailItem.password" [(level)]="level"></app-password-strength>
        <ng-template #errorTpl let-control>
          <ng-container *ngIf="password.hasError('required')">
            应请填写最少8位密码!
          </ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-control [nzErrorTip]="errorTpl"
        [nzValidateStatus]="password.invalid && (password.dirty || password.touched) ? 'error' : ''" nzHasFeedback>
        <label nz-checkbox [(ngModel)]="detailItem.enabled" name="enabled">账号是否可用</label>
      </nz-form-control>
    </nz-form-item>
  </form>
  <ng-template #nzModalFooter>
    <button nz-button nzType="default" (click)="onCancel()">取消</button>
    <button nz-button nzType="primary" [nzLoading]="loading" (click)="validate(true)"
      [acl]="['USER_CREATE', 'USER_UPDATE']">
      确定
    </button>
  </ng-template>
</nz-modal>
